<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Slideshow</title>

<style type="text/css">
body{text-align:center;font-family:Arial, Helvetica, sans-serif;}
small{font:15px Verdana, Arial, Helvetica, sans-serif;display:block;margin-bottom:15px;}
#slideshow{position:relative;height:195px;width:425px;border:10px solid #ddd;margin:0 auto 15px;}
#slideshow div{position:absolute;top:0;left:0;z-index:8;opacity:0.0;height:195px;overflow:hidden;background-color:#FFF;}
#slideshow div.current{z-index:10;}
#slideshow div.prev{z-index:9;}
#slideshow div img{display:block;border:0;margin-bottom:10px;}
#slideshow div span{display:none;position:absolute;bottom:0;left:0;height:50px;line-height:50px;background:#000;color:#fff;width:100%;}
#slideshow div.current span{display:block;}
</style>

</head>

<body>

<h1><a href="#" title="">jQuery Slideshow</a></h1>
<small>轮换时间为3秒, 图片宽度为425px</small>

<div id="slideshow">
    <div class="current">
        <a href="http://www.happinesz.cn/"><img src="1.jpg" alt="" /></a>
        <span>The First Image</span>
    </div>
    <div>
        <a href="http://www.happinesz.cn/"><img src="2.jpg" alt="" /></a>
        <span>The Second Image</span>
    </div>
    <div>
        <a href="http://www.happinesz.cn/"><img src="3.jpg" alt="" /></a>
        <span>Yes, thd third.</span>
    </div>
    <div>
        <a href="http://www.happinesz.cn/"><img src="4.jpg" alt="" /></a>
        <span>1.2.3.4...</span>
    </div>
    <div>
        <a href="http://www.happinesz.cn/"><img src="5.jpg" alt="" /></a>
        <span>The Last Images</span>
    </div>
</div>

<div>created by <a href="http://www.happinesz.cn/" title="sofish">sofish</a></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
function slideSwitch() {
	var $current = $("#slideshow div.current");
	
	// 判断div.current个数为0的时候 $current的取值
	if ( $current.length == 0 ) $current = $("#slideshow div:last");
	
	// 判断div.current存在时则匹配$current.next(),否则转到第一个div
	var $next =  $current.next().length ? $current.next() : $("#slideshow div:first");
	$current.addClass('prev');
	
	$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
			//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
			$current.removeClass("current prev");
		});
}

$(function() {
	$("#slideshow span").css("opacity","0.7");
	$(".current").css("opacity","1.0");
	
	// 设定时间为3秒(1000=1秒)
    setInterval( "slideSwitch()", 3000 ); 
});
</script>

</body>
</html>
